<template>
	<view class="content">
		<view class="topContainer">
			<view class="top-top-item">
				<view class="top-top-item-one">
					<image src="../../static/mine/userIcon.png" mode="scaleToFill" style="width: 70px;height: 70px;z-index: 1;position: absolute;"></image>
					<text style="padding: 2px 0px 2px 0px;border-radius: 3px;color: #2295FF;font-size: 13px;z-index: 2;bottom: 0;position: absolute;background-color: #FFFFFF;width: 50px;text-align: center;margin-left: 10px;box-sizing: border-box;">E管家</text>
				</view>
				
				<view class="top-top-item-two">
					<text style="font-size: 22px;font-weight: bold;color: #FFFFFF;" @click="hello">武士耍大刀</text>
					<text style="font-size: 18px;color: #FFFFFF;margin-top: 5px;">手机：15254546001</text>
				</view>
				
				<view class="top-top-item-three">
					<image src="../../static/mine/setting.png" style="width: 25px;height: 25px;"></image>
					<image src="../../static/mine/setting.png" style="width: 25px;height: 25px;margin-left: 10px;"></image>
				</view>
			</view>
			<view class="top-bottom-item">
				<text style="font-size: 18px;color: #FFFFFF;margin-top: 5px;">我的E币：15254546001</text>
				<view style="flex-grow: 1;"></view>
				<text style="font-size: 18px;color: #FFFFFF;margin-top: 5px;">立即充值{{title}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import {onLoad} from "@dcloudio/uni-app"
	import {ref} from "vue"
	import {http} from "../../request/http"
	import { useUserStore } from '@/store'
	
	let title = ref("")
	const userStore = useUserStore()
	function hello(){
		http.get("https://itfitness.usemock.com/news/swiper",{}).then((result)=>{
			title.value = result
			console.log(result)
			userStore.setUserInfo({
				nickname: "哈哈",
				token: "token"
			})
		})

	}
	
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	.topContainer{
		display: flex;
		flex-direction: column;
		background-image: url('../../static/mine/topBg.png');
		background-size: contain;
		box-sizing: border-box;
		width: 100%;
		height: 189px;
		padding: 20px 20px 20px 20px;
	}
	.top-top-item{
		display: flex;
		flex-direction: row;
		width: 100%;
	}
	.top-top-item-one{
		position: relative;
		box-sizing: border-box;
		width: 70px;
		height: 70px;
	}
	.top-top-item-two{
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		margin-top: 6px;
	}
	.top-top-item-three{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-grow: 1;
	}
	.top-bottom-item{
		display: flex;
		margin-top: 25px;
		flex-direction: row;
		width: 100%;
	}
</style>
